<template>
   <div>
     <h1 ref="titleRef">{{title}}</h1>
     <div>
        <h2>计数器</h2>
        <div ref="numRef">{{num}}</div>
        <div>
            <button @click="increment">+</button>
        </div>
     </div>
   </div>
</template>

<script>
export default {
    props:{
        title:{
            type:String
        }
    },
    data(){
        return{
            num:0
        }
    },
    methods:{
        increment(){
            this.num++
        }
    },
    beforeCreate(){
        console.group('-----组件创建之前beforeCreate-------')
        //组件创建之前的生命周期的钩子函数：data不能使用为undefined，props不能使用,methods不能使用
        console.log('data',this.num);
        //console.log('props',this.title);
        //console.log('methods',this.increment);
        console.groupEnd()

    },
    created(){
        console.group('-----组件创建created------')
        /*
            data,props,methods都可以访问了，这个生命周期的钩子函数主要完成如下操作
            1、完成向后端发生网络请求
            2、完成定时器的创建
        */
        console.log('data',this.num);
        console.log('props',this.title);
        console.log('methods',this.increment);
        console.groupEnd()
    },
    beforeMount(){
         console.group('-----组件加载之前beforeMount------')
         console.log('data',this.num);
         console.log('props',this.title);
         console.log('methods',this.increment);
         console.log('DOM',this.$refs.titleRef);
         console.groupEnd()
    },
    mounted(){
         console.group('-----模板加载后mounted------')
         console.log('data',this.num);
         console.log('props',this.title);
         console.log('methods',this.increment);
         console.log('DOM',this.$refs.titleRef);
         console.groupEnd()
    },
    beforeUpdate(){
         console.group('-----beforeUpdate------')
         console.log('data',this.num);
         console.log('dom',this.$refs.numRef.innerText);
         console.groupEnd()
    },
    updated(){
        console.group('-----updated------')
        console.log('data',this.num);
         console.log('dom',this.$refs.numRef.innerText);
         console.groupEnd()
    }
    

}
</script>

<style>

</style>